
<template>
  <div class="service">
    <div class="divBox" v-for="(item,index) in service_list" :key="index">
        <h4>{{ item.name }}</h4>
        <div class="items">
            <dl v-for="(v,i) in item.details" :key="i" @click="changeRouter(v)">
                <dt><img :src="v.imgUrl"/></dt>
                <dd class="title">{{ v.title }}</dd>
                <dd class="describe">{{ v.describe }}</dd>
            </dl>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'service',
  data(){
    return{
      service_list:[
        {id:1,name:'机场服务',details:[{id:11,title:'机场专区',path:'/indexBar',value:'index',imgUrl:require('@/assets/images/airport/airport1.jpg'),describe:'全球机场信息查询'},{id:12,title:'航班雷达',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport2.jpg'),describe:'头顶飞机轻松查'},{id:13,title:'执飞航线',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport3.jpg'),describe:'查询航线执飞'},]},
        {id:2,name:'防疫专区',details:[{id:21,title:'防疫政策',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport4.jpg'),describe:'出入政策查询'},{id:22,title:'疫情风险查询',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport5.jpg'),describe:'中高风险地区名单'},{id:23,title:'疫情航班查询',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport6.jpg'),describe:'确诊患者同程航班'},]},
        {id:3,name:'航旅纵横',details:[{id:31,title:'“胖妞”运-20',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport7.jpg'),describe:'高级质感明星机'},{id:32,title:'建党百年歼20',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport8.jpg'),describe:'补货预售经典款'},{id:33,title:'故宫太和殿积木',path:null,value:'index',imgUrl:require('@/assets/images/airport/airport9.jpg'),describe:'国潮益智礼物'},]},
        
    ],
    }
  },
  created(){

  },
  methods:{
    changeRouter(e){
      if(e.path === null){
        this.$message({
            message: '页面还在努力开发中...',
            type: 'warning'
          });
        return false
      }
      this.$router.push({path:e.path})
    }
  }
} 
</script>

<style scoped>
.divBox{
    width: 320px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 15px 10px 15px;
    margin-bottom: 10px;
    text-align: left;
}
h4{
    padding: 15px 0 5px 0;
    margin: 0;
}
.divBox{
    margin-bottom: 10px;
}
.items{
    display: flex;
}
.items dl{
    margin-right: 10px;
}
img{
    width: 100px;
    height: 100px;
}
.title{
    width: 100px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.describe{
    font-size: 12px;
    margin: 0;
    color: #8f8f8f;
}

</style>
